<template>
  <div class="vr-link-wrapper">
    <img class="w-[45px]" src="@/assets/img/map.png" @click="show()" />
    <!-- <button @click="show()">投资地图</button> -->

    <el-dialog width="60%" title="投资地图" custom-class="custom-dialog" :visible.sync="visible">
      <iframe
        :src="url"
        frameborder="0"
        width="100%"
        height="600px"
        allowFullScreen="true"
      ></iframe>
    </el-dialog>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
export default Vue.extend({
  components: {},
  props: {
    url: {
      type: String,
      default:
        'https://legacy.geohey.com/apps/dataviz/b1b000be34554787b77e2be1991cc192/share?ak=MDJkMjQ0ZTgwZWExNDkwMDhlNDNmYzUyMTA1NjFhMTE',
    },
  },
  data() {
    return {
      visible: false,
    }
  },
  head: {
    title: '',
  },
  methods: {
    show() {
      this.visible = true
    },
  },
})
</script>
<style lang="scss" scoped>
.vr-link-wrapper {
  cursor: pointer;
  .custom-dialog {
    padding: 0;
  }
}
::v-deep .el-dialog__body {
  padding: 0;
}
</style>
